<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el-select</title>
    <script src="./lib/vue@2/dist/vue.js"></script>
    <script src="./lib/element-ui@2.15.14/lib/index.js"></script>
    <script src="../../tailwind/cdnjs/tailwind-3.4.16.js"></script>
    <link rel="stylesheet" href="./lib/element-ui@2.15.14/lib/theme-chalk/index.css">

    <style>
        .hide {
            width: 0;
            overflow: hidden;
        }

        .show {
            width: 200px;
            /* height: 30px; */
            /* border-radius: 4px; */
            /* border: 1px solid #dcdfe6; */
            /* background-color: #fff; */
        }
    </style>
</head>

<body>
    <div id="app" class="max-w-md mx-auto mt-5 relative flex items-center gap-4">
        <el-button type="primary" @click="click">按钮</el-button>
        <el-select ref="selectRef" v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词"
            :remote-method="remoteMethod" :loading="loading" class="hide">
            <el-option class="w-0" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </div>

    <script>
        // var Main = {
        //     data() {
        //         return {
        //             activeIndex: '1',
        //             activeIndex2: '1',
        //             settings: {
        //                 sideTheme: 'dark',
        //             },
        //         };
        //     },
        //     methods: {
        //         handleSelect(key, keyPath) {
        //             console.log(key, keyPath);
        //         }
        //     }
        // }
        // var Ctor = Vue.extend(Main)
        // new Ctor().$mount('#app')
        new Vue({
            el: '#app',
            data() {
                return {
                    options: [],
                    value: [],
                    list: [],
                    loading: false,
                    states: ["Alabama", "Alaska", "Arizona",
                        "Arkansas", "California", "Colorado",
                        "Connecticut", "Delaware", "Florida",
                        "Georgia", "Hawaii", "Idaho", "Illinois",
                        "Indiana", "Iowa", "Kansas", "Kentucky",
                        "Louisiana", "Maine", "Maryland",
                        "Massachusetts", "Michigan", "Minnesota",
                        "Mississippi", "Missouri", "Montana",
                        "Nebraska", "Nevada", "New Hampshire",
                        "New Jersey", "New Mexico", "New York",
                        "North Carolina", "North Dakota", "Ohio",
                        "Oklahoma", "Oregon", "Pennsylvania",
                        "Rhode Island", "South Carolina",
                        "South Dakota", "Tennessee", "Texas",
                        "Utah", "Vermont", "Virginia",
                        "Washington", "West Virginia", "Wisconsin",
                        "Wyoming"]
                }
            },
            mounted() {
                this.list = this.states.map(item => {
                    return {
                        value: `value:${item}`,  //
                        label: `label:${item}`
                    };
                });
            },
            methods: {
                click() {
                    let classList = this.$refs.selectRef.$el.classList;
                    if (classList.contains('show')) {
                        classList.remove('show');
                    } else {
                        classList.add('show');
                    }
                    this.$refs.selectRef.focus();
                },
                remoteMethod(query) {
                    if (query !== '') {
                        this.loading = true;
                        setTimeout(() => {
                            this.loading = false;
                            this.options = this.list.filter(item => {
                                return item.label.toLowerCase()
                                    .indexOf(query.toLowerCase()) > -1;
                            });
                        }, 200);
                    } else {
                        this.options = [];
                    }
                }
            }
        })

    </script>

</body>

</html>